<template>
  <div class="dashboard-container">
    <!-- 面板统计组件 -->
    <panel-group
      :usersTotal="usersTotal"
      :articelTotal="articelTotal"
      :questionTotal="questionTotal"
    />
    <el-row :gutter="40">
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card>
          <!-- 饼状图 -->
          <!-- echarts在初始化实例的时候就要拿到数据，有数据就展示出来 -->
          <pie-chart
            v-if="flag"
            :legendData="categoryTotal.nameList"
            :seriesData="categoryTotal.nameAndValueList"
          />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card>
          <!-- 柱状图 -->
          <bar-chart
            v-if="flag"
            :xAxisData="monthTotal.yearMonthList"
            :seriesData="monthTotal.aritcleTotalList"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";
import PanelGroup from "./components/PanelGroup";
import api from "@/api/home.js";
export default {
  components: { PieChart, BarChart, PanelGroup },
  data() {
    return {
      usersTotal: 0,
      articelTotal: 0,
      questionTotal: 0,
      categoryTotal: {},
      monthTotal: {},
      flag: false, //用来判断是否显示图表组件，因为echarts会先初始化，数据后面才会得到
    };
  },
  mounted() {
    this.getTotal();
    this.getArticleTotal();
  },
  methods: {
    async getTotal() {
      // { data:usersTotal }是给data取别名，因为后面还要用到data
      const { data: usersTotal } = await api.getUserTotal();
      this.usersTotal = usersTotal;
      const { data: articelTotal } = await api.getArticleTotal();
      this.articelTotal = articelTotal;
      const { data: questionTotal } = await api.getQuestionTotal();
      this.questionTotal = questionTotal;
    },
    async getArticleTotal() {
      const { data: categoryTotal } = await api.getCategoryTotal();
      this.categoryTotal = categoryTotal;
      const { data: monthTotal } = await api.getMonthTotal();
      this.monthTotal = monthTotal;
      this.flag = true; //查询到数据后在初始化渲染
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-siza {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
